<template>
    <div>
        <el-button type="success" @click="isShowDialog('insert')" icon="el-icon-plus" v-if="!disabled">新增</el-button>
        <el-table :data="literatureList" :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;"  :header-cell-style="getRowClass" >
            <el-table-column prop="code" label="文献编码" show-overflow-tooltip sortable min-width="100" align="center"></el-table-column>
            <el-table-column prop="docName" label="文献名称" show-overflow-tooltip sortable min-width="100" align="center"></el-table-column>
            <el-table-column prop="docType" label="文献类型" show-overflow-tooltip	sortable min-width="100" align="center"></el-table-column>
            <el-table-column prop="publications" label="发表刊物" show-overflow-tooltip	sortable min-width="100" align="center"></el-table-column>
            <el-table-column prop="publisher" label="发表人" show-overflow-tooltip	 sortable min-width="90" align="center"></el-table-column>
            <el-table-column prop="position" label="发表人职位" show-overflow-tooltip min-width="90" align="center"></el-table-column>
            <el-table-column prop="publishTime" label="发表时间" sortable min-width="120" align="center"></el-table-column>
            <el-table-column prop="level" label="影响因子" show-overflow-tooltip sortable min-width="90" align="center"></el-table-column>
            <el-table-column prop="creatorName" label=" 上传人" show-overflow-tooltip sortable  min-width="90" align="center"></el-table-column>
            <el-table-column prop="createTime" label="上传时间" sortable min-width="120" align="center"></el-table-column>
            <el-table-column fixed="right" label="操作"  align="center" min-width="120">
                <template slot-scope="scope">
                     <el-button @click="isShowDialog('update',scope.row)" type="text" size="small" v-if="!disabled">修改</el-button>
                    <el-button @click="literatureAddTag(scope.row)" type="text" size="small">标签</el-button>
                    <el-button @click="literatureDownload(scope.row)" type="text" size="small">下载</el-button>
                    <el-button @click="deleteDate(scope.row)" type="text" size="small" v-if="!disabled">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pagination.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
        </el-pagination>
        <el-dialog :title="dialog.title" width="70%" top="40px"  center :visible.sync="dialog.isShow" :close-on-click-modal="false" :append-to-body='true'>
                <el-form :model="literatureContent" :rules="rules" label-position="right" ref="literatureFrom" label-width="100px" :inline='true'>
                    <div el-row>
                        <el-form-item label="文献名称" prop="docName" >
                            <el-input v-model="literatureContent.docName" el-col :span="8"></el-input>
                        </el-form-item>
                        <el-form-item label="文献类型" prop="docType" el-col :span="12">
                            <el-input v-model="literatureContent.docType"></el-input>
                        </el-form-item>
                    </div>
                    <div el-row>
                        <el-form-item label="发表刊物"  el-col :span="8" prop="publications" >
                            <el-input v-model="literatureContent.publications"></el-input>
                        </el-form-item>
                        <el-form-item label="发表时间" prop="publishTime" el-col :span="8">
                            <el-date-picker
                                v-model="literatureContent.publishTime"
                                type="datetime"
                                format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择发表时间">
                            </el-date-picker>
                        </el-form-item>
                    </div>
                    <div el-row>
                        <el-form-item label="发表人" prop="publisher" el-col :span="8">
                            <el-input v-model="literatureContent.publisher"></el-input>
                        </el-form-item>
                        <el-form-item label="发表人职位"  el-col :span="8" prop="publications" >
                            <el-input v-model="literatureContent.position"></el-input>
                        </el-form-item>
                    </div>
                    <el-form-item label="影响因子"  el-col :span="8" prop="publications" >
                        <el-input-number v-model="literatureContent.level" :precision="1" :step="0.1" :max="99.9"></el-input-number>
                    </el-form-item>
                    <div el-row>
                        <el-form-item label="原文献">
                            <el-upload action="" class="upload-demo" style="width: 99%;margin: 0 auto;" ref="uploadEnclosure"
                                :auto-upload="false" :limit="1" :http-request="uploadSectionFile" :file-list="literatureContent.fileList" :disabled="dialog.title.indexOf('修改')>-1">
                                <el-button  slot="trigger" size="small" type="primary">选择文献</el-button>
                            </el-upload>
                        </el-form-item>
                    </div>
                    <el-form-item>
                        <el-button type="primary" @click="addUpdate()">{{dialog.title.indexOf('新增')>-1?'新增':'编辑'}}</el-button>
                    </el-form-item>
            </el-form>
        </el-dialog>
         <el-dialog :title="dialog1.title" width="400" top="40px"  center :visible.sync="dialog1.isShow" :close-on-click-modal="false" :modal="false">
            <div>
                <h3 class="dialog-plate-title"><span>已添加标签</span></h3>
                <div  v-if="relationTag.length>0">
                    <el-tag class="tag" v-for="tag in relationTag" :key="tag.id" :closable="!disabled"  :type="tag.type==1?'warning':(tag.type==2?'success':'danger')" @close="deleteRelation(tag)"> {{tag.name}}</el-tag>
                </div>
                <div v-else class="el-table__empty-text">暂未添加任何标签</div>
                <h3 class="dialog-plate-title"  v-if="!disabled" ><span>未添加标签</span></h3>
                <el-button @click="addRelation()" icon="el-icon-plus" v-if="!disabled">添加标签</el-button>
            </div>
            <el-table :data="tabaleData" :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;"
            :height="tableHeight" :header-cell-style="getRowClass" v-loading="loading" @selection-change="handleSelectionChange"  v-if="!disabled">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="name" label="标签名称" show-overflow-tooltip sortable min-width="120" align="center">
                    <template slot-scope="scope">
                        <el-tag v-for="item in tagType" :key="item.value" :type="item.color" v-if="scope.row.type==item.value"> {{scope.row.name}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="标签类型" show-overflow-tooltip  min-width="120" align="center" :filters="tagType"
        :filter-method="filterTag">
                    <template slot-scope="scope">
                        <el-tag v-for="item in tagType" :key="item.value" :type="item.color" v-if="scope.row.type === item.value" > {{item.text}}</el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
 import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import {quillEditor} from 'vue-quill-editor';
import peHttp from '@/axios/peHttp.js'
export default {
    components:{
        quillEditor
    },
    props:{
        epKnowledId:{
            type:Number
        },
        disabled:Boolean
    },
    data(){
        return {
            tableHeight:'600px',
            literatureList:[],/**原文献列表 */
            pagination:{
                pageSize:10,
                currentPage:1,
                total:0
            },
            literatureContent:{},
            rules:{
                docName:[{required: true, message: '请输入文献名称', trigger: 'blur' }],
                publisher:[{required: true, message: '请输入发表人', trigger: 'blur' }],
                publishTime:[{required: true, message: '请输入发表时间', trigger: 'blur' }]
            },
            dialog:{
                title:'',
                isShow:false
            },
            dialog1:{
                title:'',
                isShow:false
            },
            selectTag:[],/**已选中标签 */
            relationTag:[],/**已关联标签 */
            tabaleData:[],
            literatureLinkTag:{},
             tagType:[{
                value:'1',
                text:'疾病类型',
                color:'info',
            },
            {
                value:'2',
                text:'科室',
                color:'sucess',
            },
            {
                value:'3',
                text:'非pe',
                color:'warning',
            },
            {
                value:'4',
                text:'pe',
                color:'danger'

            }],
            loading:false
        }
    },
    watch:{
    },
    mounted(){
        this.getLiteratureList();
    },
    methods:{
         getLiteratureList(){/**获取文献列表 */
            let self = this;
            let data={
                did:self.epKnowledId,
                pageSize:self.pagination.pageSize,
                currentPage:self.pagination.currentPage
            }
            peHttp.literatureList(data).then(res=>{
                if(res.content.records&&res.content.records.length>0){
                    res.content.records.forEach(element => {
                        element.level= Number(element.level).toFixed(1);
                    });
                }
                self.literatureList=res.content.records;
                self.pagination.total =  res.content.total;

            })
        },
        handleSizeChange(size){
            this.pagination.pageSize = size;
            this.getLiteratureList();
        },
        handleCurrentChange(current){
            this.pagination.currentPage = current;
            this.getLiteratureList();
        },
        isShowDialog(type,row){
            let self = this;
            self.dialog.isShow = true;
            self.dialog.title= type==='insert'?'新增原文献':'修改原文献';
             self.literatureContent = type==='insert'?{
                docName:'',
                docType:'',
                publications:'',
                publisher:'',
                publishTime:'',
                level:null,
                position:''
            }:row;
            if(type ==='update'){
                self.literatureContent.fileList=[{ name:row.fileName , url:row.path}]
            }
        },
        addUpdate(){
            let self = this;
            if(self.dialog.title.indexOf('新增')>-1){
                this.$refs['literatureFrom'].validate((valid) => {
                    if(valid){
                        if(self.$refs.uploadEnclosure.uploadFiles.length>0){
                            self.$refs.uploadEnclosure.submit();
                        }else{
                            self.$message.error(`请选择原文献`);
                        }

                    }
                })
            }else{
                this.$refs['literatureFrom'].validate((valid) => {
                    if(valid){
                      peHttp.updatePeDocument(self.literatureContent).then(res=>{
                            self.$message.success(`原文献修改成功`);
                            self.dialog.isShow=false;
                            self.getLiteratureList()
                      })
                    }
                })
            }

        },
        uploadSectionFile(param){
            let self = this;
            let fileObj = param.file;
            let form =new FormData();
            let peDocument={
                did:self.epKnowledId,
                docName:self.literatureContent.docName,
                docType:self.literatureContent.docType,
                publications:self.literatureContent.publications,
                publisher:self.literatureContent.publisher,
                publishTime:self.timestampToTime(self.literatureContent.publishTime),
                position:self.literatureContent.position
            }
            self.literatureContent.level?peDocument.level=self.literatureContent.level:0;
            form.append('peDocument',JSON.stringify(peDocument));
            form.append('file',fileObj);
            peHttp.peDocument(form).then(res=>{
                self.$message.success(`原文献新增成功`);
                self.dialog.isShow=false;
                self.getLiteratureList()
            },error=>{
                self.$message.error(`原文献新增失败`);
                    self.$emit('addHandle',self.activeName,true);
            })
        },
        literatureDownload(row){/**下载原文献 */
            window.location.href = peHttp.literatureDownload(row.id);
        },
        deleteDate(row){/**删除原文献 */
            let self = this;
            self.$confirm('确认是否删除?', '提示', {
                confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    peHttp.deteleLiterature(row.id).then(res=>{
                        self.getLiteratureList();
                        self.$message.success("原文献删除成功！");
                    },error=>{
                        self.$message.error("原文献删除失败！");
                    })
                }).catch(() => {
            });
        },
         literatureAddTag(row){/**原文献关联标签 */
            let self = this;
            self.literatureLinkTag= row;
            self.dialog1.isShow =true;
            self.dialog1.title ="关联标签详情";
            self.getNotRelationTag();
        },
        getNotRelationTag(){/**获取未关联标签和已关联标签列表 */
        let self = this;
         self.tabaleData =[];
            peHttp.tagList().then(res=>{
                self.loading=false;
                peHttp.relationTagList(self.literatureLinkTag.id).then(result=>{ /**获取已关联标签列表 */
                self.relationTag = result.content;
                for(let i=0;i<res.content.length;i++){
                    let allObj=res.content[i];
                    let isExist = false;
                    for(let j=0;j<result.content.length;j++){
                        let selectObj=result.content[j];
                        if(allObj.id===selectObj.id){
                            isExist = true;
                            break;
                        }
                    }
                    if(!isExist){
                        self.tabaleData.push(allObj);
                    }
                }
            })
            },error=>{
                self.loading=false;
            })
        },
        handleSelectionChange(row){/**选择关联标签 */
            let self = this;
            self.selectTag = row;
        },
        filterTag(value, row){/**根据标签类型筛选标签 */
            return row.type === value;
        },
        addRelation(){/**点击添加关联标签 */
            let self  =this;
            if(self.selectTag.length>0){
                let data=[];
                self.selectTag.forEach(el => {
                    data.push({
                        lid:el.id,
                        did:self.literatureLinkTag.id
                    })
                });
                peHttp.addRelationTag(data).then(res=>{
                     self.$message.success("标签关联成功！");
                     self.getNotRelationTag();

                },error=>{
                    self.$message.error("标签关联失败！");
                })
            }else{
                 self.$message.error("请至少选择一个标签");
            }
        },
        deleteRelation(tag){
            let self = this;
            self.$confirm('移除标签关联吗?', '提示', {
                confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    peHttp.deteteRelationTag(tag.relationId).then(res=>{
                            self.getNotRelationTag();
                            self.$message.success("移除标签关联成功！");
                        },error=>{
                            self.$message.error("移除标签关联失败！");
                        })
                }).catch(() => {
            });
        }
    }
}
</script>
<style scoped>

</style>
